<template>
  <el-container class="customer-details-box vehicle-info" :class="isShow ? 'read' : 'edit'">
    <el-card shadow="never" style="width: 100%" class="outCard">
      <div class="block">
        <el-card shadow="never" class="form-box">
          <el-form :model="vehicles" :rules="rules">
            <div class="form-item-box">
              <div class="form-item">
                <el-form-item label="车辆编号：" prop="id">
                  <el-input v-model="vehicles.id" :disabled="true" maxlength="20"/>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="车牌号码：" prop="vehicleNumber">
                  <el-input v-model="vehicles.vehicleNumber" :disabled="isShow" :placeholder="isShow ? '--' : '请输入车牌号码'" maxlength="20"/>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="车型名称：" prop="vehicleTypeId">
                  <el-select v-model="vehicles.vehicleTypeId" value-key="id" :disabled="isShow" :placeholder="isShow ? '--' : '请选择车型名称'" clearable  @change="selectTruckTypeGet">
                    <el-option v-for="item in carTypeList" :key="item.id" :value="item.name" :label="item.name"/>
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="车辆体积：" prop="volume">
                  <el-input v-model="vehicles.volume" :disabled="isShow" :placeholder="isShow ? '--' : '请输入车辆体积'" maxlength="20">
                    <span slot="suffix" style="color:#20232a;font-weight:400;font-size:14px;font-family:PingFangSC,PingFangSC-Regular;
                        margin-right:14px;line-height:40px;">m³</span>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="车辆载重：" prop="loadWeight">
                  <el-input v-model="vehicles.loadWeight" :disabled="isShow" :placeholder="isShow ? '--' : '请输入车辆载重'" maxlength="20">
                    <span slot="suffix" style="color:#20232a;font-weight:400;font-size: 14px;font-family:PingFangSC, PingFangSC-Regular;
                        margin-right:14px;line-height:40px;">吨</span>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-card>
        <div class="car-base car-img-base drive-base">
          <span class="imgUpload-label" style="margin-right: 14px; margin-left: 12px">图片信息</span>
          <el-card shadow="never" class="info-box">
            <div class="demo-input-suffix" style="color: #2a2929; font-size: 14px; padding-left: 6px">
              <ImageUpload v-if="!isShow" :prop-image-url="vehicles.vehicleFiles" :disabled="isShow"
                :edit-type="isShow ? 'read' : 'edit'" :is-show-example-img="diasbledImg"
                :example-list="['https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/2a6cbcb0-93d0-41a3-ae18-248ee68c1def.png','https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/95f1ad63-c8f0-4be3-a5e9-c3c9320de30f.png']"
                @imageChange="imageChange">图片大小不超过5M,支持png jpeg jpg类型,建议上传尺寸400*300,最多上传2张。
              </ImageUpload>
              <div v-else class="read-img" style="padding-left: 15px">
                <img v-if="!vehicles.vehicleFiles.length"  src="../../../assets/empty-img.png" style="width: 212px;height: 159px;border: 1px solid #d8dde3;border-radius: 4px;"/>
                <div v-for="(item, index) in vehicles.vehicleFiles" v-else :key="index" class="img-box">
                  <img style="width: 212px;height: 159px;border: 1px solid #d8dde3;border-radius: 4px;margin-right: 20px;" :src="item.url"/>
                  <div class="img-shadow">
                    <img class="el-upload-span searchBigImg" src="../../../assets/img-search.png" @click.stop="searchBigImg(item)"/>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <!-- <el-card shadow="never" style="width: 100%;height:100%" class="outCard">
      <div class="block">
        <el-card shadow="never" class="form-box">
          <el-form ref="vehicleLicense" :model="vehicleLicense" :rules="rules" label-width="110px" class="demo-ruleForm">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="行驶证号码：" prop="transportCertificateNumber" class="form-item">
                  <el-input v-model="vehicleLicense.transportCertificateNumber" :disabled="disabledStr" maxlength="20" :placeholder="isShowDriving?'--':'请输入行驶证号码'"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left:30px">
                <el-form-item label="发动机号码：" prop="engineNumber" class="form-item" label-width="100px">
                  <el-input v-model="vehicleLicense.engineNumber" :disabled="disabledStr" maxlength="20" :placeholder="isShowDriving?'--':'请输入发动机号码'"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left:30px">
                <el-form-item label="整备质量：" prop="overallQuality" class="form-item" label-width="100px">
                  <el-input v-model="vehicleLicense.overallQuality" :value="isShowDriving?vehicleLicense.overallQuality+' 吨':vehicleLicense.overallQuality"
                    :disabled="disabledStr" maxlength="20" :placeholder="isShowDriving?'--':'请输入整备质量'">
                    <span slot="suffix" style="color: #20232a;font-weight: 400;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;">吨</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="核定载质量：" prop="allowableWeight" class="form-item">
                  <el-input v-model="vehicleLicense.allowableWeight" :value="isShowDriving?vehicleLicense.allowableWeight+' 吨':vehicleLicense.allowableWeight"
                    :disabled="disabledStr" maxlength="20" :placeholder="isShowDriving?'--':'请输入核定载质量'">
                    <span slot="suffix" style="color: #20232a;font-weight: 400;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;line-height: 40px;">吨</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left:30px">
                <el-form-item label="注册时间：" prop="registrationDate" class="form-item" label-width="95px">
                  <el-date-picker v-model="vehicleLicense.registrationDate" type="date" :disabled="disabledStr" style="width: 100%"
                    value-format="yyyy-MM-dd" :placeholder="isShowDriving?'--':'请选择注册时间'"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报废日期：" prop="mandatoryScrap" class="form-item">
                  <el-date-picker v-model="vehicleLicense.mandatoryScrap" type="date" :disabled="disabledStr"
                    style="width: 100%" value-format="yyyy-MM-dd" :placeholder="isShowDriving?'--':'请选择强制报废日期'"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div class="car-base car-img-base drive-base">
          <span class="imgUpload-label" style="margin-right:6px;margin-left:12px">图片信息</span>
          <el-card shadow="never" class="info-box">
            <div class="demo-input-suffix" style="color: #2a2929; font-size: 14px; padding-left: 6px">
              <ImageUpload v-if="!disabledStr" :prop-image-url="vehicleLicense.picture"  :disabled="disabledStr" :edit-type="disabledStr?'read':'edit'"
                :is-show-example-img="diasbledImg"
                :example-list="['https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/086942c3-6c43-432d-80f1-64f53b424be9.png','https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/4002ebba-8a62-4a5c-b64c-358189456eb6.png']"
                @imageChange="imageChange">注:图片大小不超过5M,支持png jpeg jpg类型,建议上传尺寸400*300,最多上传2张。
              </ImageUpload>
              <div v-else class="read-img">
                <img v-if="!vehicleLicense.picture.length" src="../../../assets/empty-img.png" style="width:212px;height:159px;border: 1px solid #D8DDE3;border-radius: 4px;"/>
                <div v-for="(item,index) in vehicleLicense.picture" v-else :key="index" class="img-box">
                  <img style="width:212px;height:159px;border: 1px solid #D8DDE3;border-radius: 4px;margin-right:20px" :src="item.url">
                  <div class="img-shadow">
                    <img class="el-upload-span searchBigImg" src="../../../assets/img-search.png" @click.stop="searchBigImg(item)"/>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card> -->
    <div v-if="isShow" class="footer-box">
      <el-button class="save-btn" type="warning" @click="handleEditVehicleInfo()">编辑</el-button>
    </div>
    <div v-else class="footer-box">
      <el-button class="save-btn" type="warning" @click="handleSubVehicleInfo()">保存</el-button>
      <el-button class="cancel-btn" type="warning" plain @click="handleCanVehicleInfo()">取消</el-button>
    </div>
    <!-- 预览弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
      <img width="100%" :src="imageUrl" alt="" />
    </el-dialog>
  </el-container>
</template>
<script>
import { truckTypeDetail, truckTypeUpdate, getCarTypeList } from '@/api/transit'
import ImageUpload from '@/components/ImgUpload/index.vue'
export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      imageUrl: '',
      dialogVisible: false,        //预览弹窗
      diasbledImg: true,
      disabled: true,
      isShow: true,
      carTypeList: [],            //车辆类型
      vehicles: {                 //车辆信息
        id:'',
        vehicleNumber: '',
        vehicleTypeId: '',
        vehicleTypeName: '',
        vehicleCode: '',
        vehicleLogo: '',
        volume: '',
        loadWeight: '',
        remark: '',
        vehicleFiles: []
      },
      vehicleLicense: {          //行驶证信息
        id: '',
			  checkLoadWeight: '',
			  engineNumber: '',
			  invalidTime: '',
			  licenseNumber: '',
			  registerTime: '',
			  remark: '',
			  vehicleNumber: '',
			  wholeWeight: '',
        licenseFiles : []
      },
      // 参数校验
      rules: {
        volume: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^[0-9]+(.[0-9]{1,2})?$/
                if (!reg.test(value)) {
                  callback(new Error('请输入车辆体积，只保留两位小数'))
                } else {
                  callback()
                }
              } else {
                callback(new Error('车辆体积不能为空'))
              }
            },
            trigger: 'blur'
          }
        ],
        vehicleNumber: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
                if (!reg.test(value)) {
                  callback(new Error('请输入正确的车牌号码'))
                } else {
                  callback()
                }
              } else {
                callback(new Error('车牌号码不能为空'))
              }
            },
            trigger: 'blur'
          }
        ],
        vehicleTypeId: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('车型不能为空'))
              }
            },
            trigger: 'change'
          }
        ],
        loadWeight: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^[0-9]+(.[0-9]{1,2})?$/
                if (!reg.test(value)) {
                  callback(new Error('请输入车辆载重，只保留两位小数'))
                } else {
                  callback()
                }
              } else {
                callback(new Error('车辆载重不能为空'))
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getList(this.id)
    this.getCarTypeList()
  },
  methods: {
    // 获取全部车辆类型
    async getCarTypeList() {
      const { data: res } = await getCarTypeList()
      this.carTypeList = res
    },
    // 选择车型
    selectTruckTypeGet(id) {
      const obj = this.carTypeList.find((item) => item.name === id)
      this.vehicles.vehicleTypeId = obj.id
      this.vehicles.vehicleTypeName = obj.name
      this.vehicles.vehicleCode = obj.code
    },
    // 查询大图
    searchBigImg(file) {
      this.imageUrl = file.url
      this.dialogVisible = true
    },
    // 图片增改
    imageChange(value) {
      this.diasbledImg = !value.length
      this.vehicles.picture = value.map((item) => {
        return { url: item.size ? item.response.data : item.url }
      })
    },
    // 获取车辆详情-基本信息
    async getList(id) {
      const { data: res } = await truckTypeDetail(id)
      this.vehicles.id = res.id
      this.vehicles.licensePlate = res.licensePlate
      this.vehicles.truckTypeName = res.truckTypeName
      this.vehicles.allowableVolume = res.allowableVolume
      this.vehicles.allowableLoad = res.allowableLoad
      this.vehicles.deviceGpsId = res.deviceGpsId
      this.vehicles.picture = res.picture
        ? res.picture.split(',').map((item) => {
            return { url: item }
          })
        : []
      this.diasbledImg = !res.picture
    },
    // 编辑基本信息
    async handleEditVehicleInfo() {
      this.isShow = false
    },
    // 保存
    async handleSubVehicleInfo() {
      const {
        deviceGpsId,
        picture,
        licensePlate,
        truckTypeName,
        allowableVolume,
        allowableLoad
      } = this.vehicles
      if (/[\u4E00-\u9FA5]/g.test(deviceGpsId)) {
        return this.$message.error('GPSID不能为中文')
      }
      if (picture.length < 1) {
        return this.$message.error('车辆信息照片至少上传一张')
      }
      if (!licensePlate) {
        return this.$message.error('请填写车牌号码')
      } else if (!truckTypeName) {
        return this.$message.error('请选择车型名称')
      } else if (!allowableVolume) {
        return this.$message.error('请填写车辆体积')
      } else if (!allowableLoad) {
        return this.$message.error('请填写车辆载重')
      } else if (!deviceGpsId) {
        return this.$message.error('GPSID')
      }

      const data = {
        deviceGpsId: this.vehicles.deviceGpsId,
        licensePlate: this.vehicles.licensePlate,
        allowableLoad: this.vehicles.allowableLoad,
        allowableVolume: this.vehicles.allowableVolume,
        truckTypeId: this.vehicles.truckTypeId,
        truckTypeName: this.vehicles.truckTypeName,
        picture: this.vehicles.picture
          .map((item) => {
            return item.size ? item.response.data : item.url
          })
          .join()
      }
      await truckTypeUpdate(this.vehicles.id, data).then((res) => {
        if (String(res.code) === '200') {
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
          this.isShow = true
          this.disabledLicensePlate = true
          this.disabledAllowableVolume = true
          this.disabledAllowableLoad = true
          this.disabledGPSID = true
        }
      })
    },
    // 取消
    handleCanVehicleInfo() {
      this.isShow = true
      this.disabledLicensePlate = true
      this.disabledAllowableVolume = true
      this.disabledAllowableLoad = true
      this.disabledGPSID = true
      this.getList(this.id)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
  height: 100%;
}
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  display: block;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-aside {
  color: #333;
}
::v-deep .el-row {
  margin-bottom: 20px;
}
.customer-details-box {
  height: 100%;
  margin-left: 20px;
  .block {
    background-color: #ffffff;
    width: 100%;
    padding: 0 24px;
  }
  .car-base {
    color: #2a2929;
    font-size: 16px;
    margin: 15px 0;
    font-weight: 700;
  }
  .car-img-base {
    margin: 25px 0;
    margin-top: 10px;
    display: flex;
    padding-left: 25px;
    position: relative;
    bottom: 20px;
    .info-box {
      border: 0 !important;
      padding: 0 0 15px 0;
      width: 100%;
    }
    .imgUpload-label {
      font-size: 14px;
      color: #20232a;
      font-weight: normal;
      white-space: nowrap;
    }
    ::v-deep .img-box {
      display: inline-block;
      position: relative;
      .img-shadow {
        position: absolute;
        top: 0;
        width: 212px;
        height: 159px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        text-align: center;
        display: none;
        .searchBigImg {
          width: 28px;
          height: 28px;
          margin-top: 64px;
          cursor: pointer;
        }
      }
    }
    ::v-deep .el-card {
      .el-card__body {
        padding-left: 5px;
      }
    }

    .img-box:hover {
      .img-shadow {
        display: block;
      }
    }
  }
  .form-box {
    border: 0 !important;
    ::v-deep .el-card__body {
      padding: 15px 26px;
      padding-bottom: 30px;
      .form-item-box {
        display: flex;
        flex-wrap: wrap;
        .form-item {
          width: 50%;
          display: flex;
          align-items: center;
          margin-top: 24px;
          box-sizing: border-box;
          &:nth-child(1),
          &:nth-child(2) {
            margin-top: 0;
          }
          &:nth-child(odd) {
            padding-right: 35px;
          }
          &:nth-child(even) {
            padding-left: 35px;
          }
          .span-title {
            min-width: 80px;
            font-weight: 400;
            text-align: right;
            color: #20232a;
            font-size: 14px;
          }
          ::v-deep .el-input {
            flex: 1;
            margin-left: 10px;
          }
          ::v-deep.el-input.is-disabled .el-input__inner {
            background: #eff3f8;
            border: 1px solid #d8dde3;
            border-radius: 5px;
            font-weight: 400;
            color: #bac0cd;
          }
        }
      }
    }
  }
  .footer-box {
    text-align: center;
    padding: 30px 0 16px;
    .save-btn {
      width: 110px;
      border-radius: 5px;
      font-weight: 400;
    }
    .cancel-btn {
      width: 110px;
      border-radius: 5px;
      font-weight: 400;
    }
  }
}
// 修改el-button中warnning的默认样式
.el-button--warning {
  width: 100px;
  height: 40px;
  background: #e15536;
  border-radius: 4px;
  // 修改鼠标悬浮时的样式
  &:hover {
    width: 100px;
    height: 40px;
    background: #ffab98;
    border-radius: 4px;
  }
  // 修改按下时的样式
  &:active {
    width: 100px;
    height: 40px;
    background: #cc4628;
    border-radius: 4px;
  }
  // 修改禁用时的样式
  &.is-disabled {
    width: 100px;
    height: 40px;
    background: #ffdfda;
    border-radius: 4px;
  }
}
::v-deep .el-dialog__header {
  background-color: white;
  position: relative;
  z-index: 2;
  padding: 0px;
}
::v-deep .el-dialog__body {
  position: absolute;
  height: 600px;
  width: 100%;
  top: 0;
  padding: 0;
  img {
    position: absolute;
    width: 100%;
    height: 600px;
  }
}
::v-deep .el-dialog {
  height: 600px;
}
::v-deep .el-form-item__content {
  white-space: nowrap;
  flex-wrap: nowrap;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
  width: 100%;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  color: #20232a;
  font-weight: normal;
}
::v-deep .el-form-item__error {
  left: 90px;
}
::v-deep .el-date-editor {
  width: auto !important;
}
//只读状态下不展示表单提示语
.read {
  ::v-deep .el-form-item__error {
    display: none;
  }
.el-card {
  min-width: 380px;
  margin-right: 20px;
  transition: all .5s;
}
.el-card:hover{
  margin-top: -5px;
}
}
</style>
